<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播</title>
		<style>
			#main{
				width: 520px;
				height: 280px;
				position: relative;
			}
			#main>ul{
				list-style: none;
				position: absolute;
				bottom: -5px;
				left: 180px;
				z-index: 2;
				
			}
			#main>ul li{
				float: left;
				width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				border-radius: 50%;
				background-color: darkgray;
				color: white;
				font-size: 12px;
				margin-left: 5px;
				opacity: 0.3;
			}
			
			#main>ul li:hover{
				background-color: orange;
				opacity: 1;
			}
			#main>ul:after{
				content: '';
				display: block;
				clear: both;
		
			}
		</style>

	</head>
	<body>
		<div id="main">
			<img src="../homework-imgs/1.jpg" alt="" id="imgs" onmouseenter="window.clearInterval(timer)"
				onmouseleave="lunbo2()">
			<ul id="lis">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		
		<script>
			// window.onload=function(){

			// }

			var pic = document.getElementById("imgs");
			//用于标记图片数组的下标
			var index = 0;
			//图片路径数组
			var picSrc = ["../homework-imgs/1.jpg", "../homework-imgs/2.jpg", "../homework-imgs/3.jpg", "../homework-imgs/4.jpg",
				"../homework-imgs/5.jpg"
			];
			var ul=document.querySelector("#lis");
			var li=ul.children;
		
			//声明图片定时器
			// var timer = setInterval("lunbo()", 1500);
			var timer = setInterval(function(){
				lunbo();
				
			}, 1500);
			function lunbo() {
				if (index == 5) {
					index = 0;
				}
				pic.src = picSrc[index];
				li[index].style.backgroundColor = "orange";
				li[index].style.opacity=1;
				if(index!=0){
					li[index-1].style.backgroundColor = "darkgray";
					li[index-1].style.opacity=0.3;
				}else{
					li[4].style.backgroundColor = "darkgray";
					li[4].style.opacity=0.3;
				}
				index++;
			}
			//鼠标离开图片时，开启定时器
			function lunbo2(){
				clearInterval(timer);
			   timer=window.setInterval(function(){
				   lunbo();
			   }, 1500);
			}
			
			
		</script>
	</body>
</html>
